<template>
    <div class="basic-layout-page">
        <a-layout>
            <a-layout-sider class="layout-sider" v-model="collapsed">
                <div class="logo">
                    <img src="../assets/logo.png" alt="" />
                    <div class="title" :class="{ show: !collapsed }">
                        商品管理系统
                    </div>
                </div>
                <a-menu
                    :default-selected-keys="['1-1']"
                    theme="dark"
                    mode="inline"
                >
                    <a-sub-menu key="1">
                        <span slot="title">
                            <a-icon type="appstore" /><span>商品管理</span>
                        </span>
                        <a-menu-item key="1-1">商品列表</a-menu-item>
                        <a-menu-item key="1-2">上传商品</a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <a-layout-header class="layout-header">
                    <div class="left">
                        <a-icon
                            type="menu-fold"
                            class="icon"
                            @click="collapsed = !collapsed"
                        />
                    </div>
                    <div class="right">
                        <a-icon type="bell" class="bell" />
                        <span class="welcome">欢迎您，沈玉瑾</span>
                        <a-dropdown>
                            <a-avatar
                                src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                            />
                            <a-menu slot="overlay">
                                <a-menu-item key="0">
                                    <a-icon type="setting" />
                                    <span style="margin-left: 8px"
                                        >个人中心</span
                                    >
                                </a-menu-item>
                                <a-menu-item key="1">
                                    <a-icon type="logout" />
                                    <span>退出登录</span>
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                </a-layout-header>
                <a-layout-content class="layout-content">
                    <router-view class="layout-container"></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </div>
</template>
<script>
export default {
    data() {
        return {
            collapsed: false
        };
    }
};
</script>
<style lang="less">
.basic-layout-page {
    .layout-sider {
        .logo {
            padding: 12px 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 64px;
            overflow: hidden;
            img {
                width: 40px;
            }
            .title {
                color: #fff;
                font-size: 16px;
                font-weight: bold;
                transition: all 0.2s ease-in-out;
                width: 0;
                text-overflow: initial;
                overflow: hidden;
                white-space: nowrap;
                text-align: right;
            }
            .title.show {
                flex: 1;
            }
        }
    }
    .layout-header {
        background-color: #fff;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            .icon {
                font-size: 24px;
                cursor: pointer;
            }
        }
        .right {
            .bell {
                font-size: 16px;
                line-height: 64px;
                cursor: pointer;
                padding: 0 5px;
            }
            .bell:hover {
                background-color: #eee;
            }
            .welcome {
                margin: 0 12px 0 7px;
            }
        }
    }
    .layout-content {
        height: calc(100vh - 64px);
        overflow-y: auto;
        padding: 10px;
        .layout-container {
            background-color: #fff;
            height: 100%;
            padding: 15px;
            border-radius: 2px;
        }
    }
}
</style>
